<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获得事件源</title>

    <style>
        .wrapper {
            border: 1px solid blue;
            width: 400px;
            height: 100px;
            margin: 25px auto;
        }
    </style>

</head>

<body>

    <script type="text/javascript">
        function firstHandle() {
            console.log(this === window); //true
            // 可以通过 window 对象 的 event 变量来获得当前的事件
            console.log('事件: ', window.event);
            console.log('当前函数: ', arguments.callee.name);
            console.log('谁调用了当前函数: ', arguments.callee.caller.name);
            console.log('事件: ', arguments.callee.caller.arguments[0]);

            console.log('事件类型(事件名称): ', window.event.type);
            console.log('事件源(事件目标): ', window.event.target);
        }
    </script>
    <div class="wrapper first" onClick="firstHandle()"></div>

    <div class="wrapper second" id="second"></div>
    <script type="text/javascript">
        //let s = document.querySelector( '.second' );
        var s = document.getElementById('second');
        if (s) {

            function secondHandle() {
                console.log(this === window); //true
                console.log(this); //window
                console.log('事件: ', window.event);
                console.log('事件类型(事件名称): ', window.event.type);
                // window.event.srcElement是针对IE11之前版本
                console.log('事件源(事件目标): ', window.event.target, window.event.srcElement);

                console.log('当前函数: ', arguments.callee.name);
                console.log('谁调用了当前函数: ', arguments.callee.caller);
                console.log('事件: ', arguments.callee.caller.arguments[0]);
            }

            s.onclick = function() {
                secondHandle();
            }
        }
    </script>

    <div class="wrapper third" id="third"></div>
    <script type="text/javascript">
        //let t = document.querySelector( '.third' );
        var t = document.getElementById('third');
        if (t) {
            // 指定事件类型(事件名称)
            var type = 'click';

            // 指定事件监听器(侦听器)
            var listener = function() {
                console.log(this === window); //false
                console.log(this);
                console.log('事件: ', window.event);
                console.log('事件类型(事件名称): ', window.event.type);
                // window.event.srcElement是针对IE11之前版本
                console.log('事件源(事件目标): ', window.event.target, window.event.srcElement);

                console.log('当前函数: ', arguments.callee.name);
                console.log('谁调用了当前函数: ', arguments.callee.caller);
                console.log('事件: ', arguments[0]);
            }

            // 指示是否在捕获阶段处理事件
            var capture = false; // false表示不在捕获阶段处理

            // 判断 元素 是否支持 addEventListener
            if (t.addEventListener) {
                // EventTarget.prototype.addEventListener
                t.addEventListener(type, listener, capture);
            } else {
                // 在 IE9 之前是不支持 addEventListener 的
                // t.attachEvent( 'onclick' , fun );
                t.attachEvent('on' + type, listener);
            }
        }
    </script>

</body>

</html>